<template>
    <div class="top">
        <div class="top_bgcor">
            <div class="top_header">
                <div class="top_header_back iconfont" @click="handleBackClick">&#xe600;</div>
                确认订单
            </div>
            <div class="top_receiver">
                <div class="top_receiver_title">收货地址</div>
                <div class="top_receiver_address">武汉市洪山区湖北工业大学北门</div>
                <div class="top_receiver_info">
                    <span class="top_receiver_info_name">初启元(先生)</span>
                    <span class="top_receiver_info_name">123456789</span>
                </div>
                <div class="iconfont top_receiver_icon">&#xe600;</div>
            </div>
        </div>
    </div>    
</template>

<script>
import { useRouter, useRoute } from 'vue-router'
export default {
    name: 'TopArea',
    setup() {
    const router = useRouter()
    const route = useRoute()
    const shopId = route.params.id
    const handleBackClick = () => { router.back() }
    // const handleAddressClick = () => { router.push(`/chooseAddressList/${shopId}`) }
    // const address = useAddressEffect()
    return { handleBackClick }
  }
}
</script>

<style lang="scss" scoped>
.top {
    position: relative;
    height: 1.96rem;
    background-size: 100% 1.59rem;
    background-image: linear-gradient(0deg,rgba(0,145,255,0.00) 4%,#0091ff 50%);
    background-repeat: no-repeat;
    background-color: #eee;
    &_header {
        position: relative;
        padding-top: .2rem;
        line-height: .24rem;
        color: #fff;
        text-align: center;
        font-size: .16rem;
        &_back {
            position: absolute;
            left: .18rem;
            font-size: .22rem;
        }
    }
    &_receiver{
        position: absolute;
        left: .18rem;
        right: .18rem;
        bottom: 0;
        height: 1.11rem;
        background-color: #fff;
        border-radius: .04rem;
        &_title{
            line-height: .22rem;
            padding: .16rem 0 .16rem .16rem;
            font-size: .16rem;
            color: #333;

        }
        &_address{
            line-height: .2rem;
            padding: 0 .4rem 0 .16rem;
            font-size: .16rem;
            color: #333;
        }
        &_info{
            padding: .06rem 0 0 .16rem;
            &_name{
                margin-right: .06rem;
                line-height: .18rem;
                font-size: .12rem;
                color: #666;
            }
        }
        &_icon{
            transform: rotate(180deg);
            position: absolute;
            right: .16rem;
            top: .5rem;
            color: #666;
            font-size: .2rem;
        }
    }
 } 
</style>